<script>
import { Document, Menu, Location, Setting } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

export default {
  name: "index",
  components: {
    Document,
    Menu,
    Location,
    Setting
  },
 
}
</script>

<template>
    <div class="common-layout">
      <el-container>
        <el-header>
          <div class="header-container">
            <div class="system-title">网上电子书店管理系统</div>

          </div>
        </el-header>
        <el-container style="flex: 1; overflow: hidden;">
          <el-container direction="vertical" style="width: 150px; flex: none;">
            <el-aside width="150px" style="height: 100%;">
              <el-menu background-color="#67C23A" text-color="#fff" active-text-color="#ffd04b" style="border-right: none;">
                <el-menu-item index="1" @click="$router.push('/index/demo')">
                  <el-icon><Menu /></el-icon>
                  <span>首页</span>
                </el-menu-item>
                <el-sub-menu index="2">
                  <template #title>
                    <el-icon><Setting /></el-icon>
                    <span>用户管理</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item index="2-1" @click="$router.push('/index/user')">用户列表</el-menu-item>
                    <el-menu-item index="2-2" @click="$router.push('/index/member')">会员列表</el-menu-item>
<!--                    <el-menu-item index="2-3" @click="$router.push('/index/memb-receipt')">会员收货地址</el-menu-item>-->
<!--                    <el-menu-item index="2-2">添加用户</el-menu-item>-->
                  </el-menu-item-group>
                </el-sub-menu>
                <el-sub-menu index="3">
                  <template #title>
                    <el-icon><Document /></el-icon>
                    <span>图书管理</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item index="3-1" @click="$router.push('/index/book')">图书表</el-menu-item>
                    <el-menu-item index="3-2" @click="$router.push('/index/book-category')">图书分类</el-menu-item>
                    <el-menu-item index="3-3" @click="$router.push('/index/book-collect')">图书收藏</el-menu-item>
                    <el-menu-item index="3-4" @click="$router.push('/index/book-feedback')">图书反馈</el-menu-item>
                    <el-menu-item index="3-5" @click="$router.push('/index/book-resource')">图书资源</el-menu-item>
                    <el-menu-item index="3-6" @click="$router.push('/index/press')">出版社列表</el-menu-item>
                  </el-menu-item-group>
                </el-sub-menu>
                <el-sub-menu index="4">
                  <template #title>
                    <el-icon><Document /></el-icon>
                    <span>订单管理</span>
                  </template>
                  <el-menu-item-group>
                    <!-- <el-menu-item index="4-1" @click="$router.push('/index/press')">出版社列表</el-menu-item> -->
                   <el-menu-item index="4-1" @click="$router.push('/index/order')">订单表</el-menu-item>
                    <el-menu-item index="4-2" @click="$router.push('/index/shop-cart')">购物车表</el-menu-item>
                  </el-menu-item-group>
                </el-sub-menu>
              </el-menu>
            </el-aside>
          </el-container>
          <el-main>
            <router-view style="width: 100%; height: 100%;"></router-view>
          </el-main>
        </el-container>
      </el-container>
    </div>
</template>

<style>
.el-header {
  background-color: #409EFF;
  color: white;
  height: 60px;
  padding: 0 20px;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.system-title {
  font-size: 18px;
  font-weight: bold;
  flex: 1;
  text-align: center;
}




.el-aside {
  background-color: #67C23A;
  color: white;
  margin: 2px 0;
  width: 150px;
  padding: 0;
}

.el-menu {
  width: 100%;
  height: 100%;
}

.el-menu-item-group__title {
  padding: 5px 10px;
  font-size: 12px;
  color: #e6e6e6 !important;
}
.el-main {
  text-align: center;
  flex: 1;
  display: flex;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
}

.el-container {
  height: 100%;
  margin: 0;
  display: flex;
  width: 100%;
  overflow: hidden;
}

.common-layout {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

</style>